<template>
    <div>
        <div class="mainBox">
            <ul>
                <li :class="tabnumber==1?'hover':''" @click="studentorder(1)">考生名单</li>
                <li :class="tabnumber==2?'hover':''" @click="studentorder(2)">参试名单</li>
            </ul>
        </div>
        <div class="mainBox">
            <div style="display: flex;align-items: center;">
                <el-select v-model="studentobj.nav6id" placeholder="语文A" v-if="tabnumber==2" @change="csstudentchange" clearable>
                    <el-option
                    v-for="item in csxkstudentlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="studentobj.gradeid" placeholder="全部学校" @change="schoolindexclass" clearable>
                    <el-option
                        v-for="item in schoollist"
                        :key="item.gradeid"
                        :label="item.schoolname"
                        :value="item.gradeid">
                    </el-option>
                </el-select>
                <el-select v-model="studentobj.classid" placeholder="全部班级" clearable @change="classindexgrade">
                    <el-option
                    v-for="item in classlist"
                    :key="item.classid"
                    :label="item.classname"
                    :value="item.classid">
                    </el-option>
                </el-select>
                <el-input v-model="studentobj.examNumber" placeholder="考号" clearable @change="examnumberclick"></el-input>
                <el-input v-model="studentobj.username" placeholder="姓名" clearable @change="usernameclick"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="addnewschool">单个添加</el-button>
                <!-- <el-button type="primary" @click="batchuploadadd">批量导入</el-button> -->
                <!-- <el-button type="primary" @click="copyexamclickbox">名单复用</el-button> -->
                <el-button type="primary" style="background:#D54941;border-color:#D54941" v-if="tabnumber==2">重置选科</el-button>
                <el-button type="primary" style="background:#D54941;border-color:#D54941" @click="batchdeleteclick">批量删除</el-button>
            </div>
        </div>
        <!-- 考生名单 -->
        <studentOrder v-if="tabnumber==1" :tabnumber="tabnumber" :studentlist="studentlist" :total="total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :pageNumber="studentobj.pagesize" @editExamschool="editExamschool" @handleSelectionChange="handleSelectionChange" @deleteExamStudent="deleteExamStudent"></studentOrder>
        <!-- 参试名单 -->
        <studentexamOrder v-if="tabnumber==2" :tabnumber="tabnumber" :csxsStudentlist="csxsStudentlist" :total="total" :csxkstudentlist="csxkstudentlist" :pageNumber="studentobj.pagesize" @handleCurrentChange1="handleCurrentChange1" @handleSizeChange1="handleSizeChange1" @editExamStudent="editExamStudent"></studentexamOrder>
        <!-- 新增学生 -->
		<addStudent v-if="addSchoolshow" @addSchoolclick="addSchoolclick" :tabnumber="tabnumber" @addStudentclick="addStudentclick" :addstudentcon="addstudentcon"></addStudent>
        <!-- 创建复用考试 -->
		<examCopy v-if="examCopyIshow" @copyexamclick="copyexamclick" :type="2"></examCopy>
        <!-- 批量导入 -->
         <batchUpload v-if="uploadishow" @uploadclick="uploadclick" :type="1"></batchUpload>
    </div>
</template>

<script>
import addStudent from '../../../components/student/addstudent.vue'
import examCopy from '../../../components/copyexam.vue'
import batchUpload from '../../../components/upload.vue'
import studentOrder from '../../../components/student/studentorder.vue'
import studentexamOrder from '../../../components/student/studentexamorder.vue'
import { 
    getStudentlist,
    getexamallschool,
    getexamallschoolClasslist,
    getsubjectStudent,
    getsubjectnavsix,
    deleteTeacherStudent
 } from '../../../api/api.js'
export default {
    name: 'projectoverview',
    data () {
        return {
            stopexamlist:[
                {
                    name:'[12345]语文',
                    subject:'语文',
                    status:'上传开始',
                    modelname:'250414语文内蒙3卷',
                    schoolname:'北京小学',
                    ipadress:'192.168.1.1',
                }
            ],
            studentlist:[],
            multipleSelection:[],
            addSchoolshow:false,
            schoolindex:'',
            examSubjectlist:'',
            selected: {
                province: '',
                city: '',
                area: ''
            },
            examCopyIshow:false,
            uploadishow:false,
            examMxshow:false,
            currentPage:1,
            total:0,
            tabnumber:1,
            options:[],
            studentobj:{
                nav5id:'',
                page:1,
                pagesize:20,
                username:'',
                classid:'',
                gradeid:'',
                examNumber:''
            },
            schoollist:[],
            schoolId:'',
            classlist:[],
            csxsStudentlist:[],
            csxkstudentlist:[],
            addstudentcon:{}
        }
    },
    computed: {
        examId() {
            return this.$store.state.examId;
        }
    },
    watch: {
    	examId(newVal) {
            if (newVal) {
                this.examnavid = newVal;
                this.getstudentclicklist(newVal);
                this.getschoolnamelist(newVal);
                if(this.tabnumber == 2){
                    this.getsubjectStudentclick(newVal);
                    this.subjectliststudentclick(newVal,this.studentobj.nav6id)
                }
                this.$store.commit('setExamId', ''); // 重置状态
            }
        }	
    },
    mounted() {
        this.examcontent = JSON.parse(sessionStorage.getItem('examContent'));
        this.getstudentclicklist(this.examcontent.nav5id)
        this.getschoolnamelist(this.examcontent.nav5id)
    },
    methods: {
        onSelected(){
				
			},
        //新增考试
        addnewschool(){
            this.addSchoolshow = true
        },
        addSchoolclick(){
            this.addSchoolshow = false
        },
        editExamschool(){
            this.addSchoolshow = true
        },
        copyexamclick(){
            this.examCopyIshow = false
        },
        copyexamclickbox(){
            this.examCopyIshow = true
        },
        batchuploadadd(){
            this.uploadishow = true
        },
        uploadclick(){
            this.uploadishow = false
        },
        // 考试明细
        examMxclick(){
            this.examMxshow = false
        },
        //考试明细
        modelclick(){
            this.examMxshow = true
        },
        studentorder(number){
            this.tabnumber = number
            this.studentobj.page = 1
            if(number===2){
                this.getsubjectStudentclick(this.examcontent.nav5id)
            }
        },
        getstudentclicklist(id){
            this.studentobj.nav5id = id
            getStudentlist(this.studentobj).then(res=>{
                if(res.code===0){
                    this.studentlist = res.obj.results
                    this.total = res.obj.count
                }else{
                   this.$message.error(res.msg) 
                }
            })
        },
        handleCurrentChange(val) {
        	this.studentobj.page = val
            this.getstudentclicklist(this.examcontent.nav5id) 
        },
        handleSizeChange(val) {
            this.studentobj.pagesize = val
            this.getstudentclicklist(this.examcontent.nav5id)
        },
        //获取这场考试的所有学校
        getschoolnamelist(id){
            let obj={
                nav5id:id
            }
            getexamallschool(obj).then(res=>{
                console.info(res)
                if(res.code===0){
                    this.schoollist = res.obj
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        //年级查询
        schoolindexclass(val){
            if(this.tabnumber==1){
            	this.getstudentclicklist(this.examcontent.nav5id) 
            }else{
                this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
            }
            if(val!=''){
                let obj={
                    gradeid:val
                }
                getexamallschoolClasslist(obj).then(res=>{
                    if(res.code===0){
                        this.classlist = res.obj
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        //班级查询
        classindexgrade(val){
            if(this.tabnumber==1){
                this.getstudentclicklist(this.examcontent.nav5id)
            }else{
                this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
            }
        },
        //考号查询
        examnumberclick(val){
            if(this.tabnumber==1){
                this.getstudentclicklist(this.examcontent.nav5id)
            }else{
                this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
            }
        },
        //姓名查询
        usernameclick(val){
            if(this.tabnumber==1){
                this.getstudentclicklist(this.examcontent.nav5id)
            }else{
                this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
            }
        },
        //通过学科查询
        csstudentchange(val){
            this.subjectliststudentclick(this.examcontent.nav5id,val)
        },
        // 参试名单
        subjectliststudentclick(id,subjectid){
            this.studentobj.nav5id = id
            this.studentobj.nav6id = subjectid
            getsubjectStudent(this.studentobj).then(res=>{
                if(res.code===0){
                    this.csxsStudentlist = res.obj.results
                    this.total = res.obj.count
                }else{
                   this.$message.error(res.msg)
                }
            })
        },
        //通过学科id获取学生
        getsubjectStudentclick(id){
            let obj={
                id:id
            }
            getsubjectnavsix(obj).then(res=>{
                if(res){
                    this.csxkstudentlist = res.map(item => {
                        const id = Object.keys(item)[0]; // 获取对象的第一个键
                        return {
                            id: parseInt(id), // 如果需要id是数字类型就加上parseInt，否则直接用id
                            name: item[id]
                        };
                    });
                    console.info(this.csxkstudentlist)
                    this.subjectliststudentclick(id,this.csxkstudentlist[0].id)
                    this.studentobj.nav6id = this.csxkstudentlist[0].id
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        handleCurrentChange1(val) {
        	this.studentobj.page = val
            this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
        },
        handleSizeChange1(val) {
            this.studentobj.pagesize = val
            this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
        },
        //添加成功关闭弹窗
        addStudentclick(){
            this.getstudentclicklist(this.examcontent.nav5id)
            this.subjectliststudentclick(this.examcontent.nav5id,this.studentobj.nav6id)
            this.addSchoolshow = false
        },
        //编辑考生
        editExamschool(con){
            this.addSchoolshow = true
            this.addstudentcon = con
        },
        //编辑参试名单
        editExamStudent(con){
            this.addSchoolshow = true
            this.addstudentcon = con
        },
        //批量删除数据
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //当个删除
        deleteExamStudent(ids){
            let obj={
                userids:JSON.parse(ids)
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteTeacherStudent(obj).then(res=>{
                        if(res.code==0){
                            this.getstudentclicklist(this.examcontent.nav5id)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //批量删除
        batchdeleteclick(){
            if(this.multipleSelection.length==0){
                this.$message.error('请选择要删除的数据')
                return
            }
        	let obj={
                userids:this.multipleSelection.map(item=>item.studentid)
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteTeacherStudent(obj).then(res=>{
                        if(res.code==0){
                            this.getstudentclicklist(this.examcontent.nav5id)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            }); 
        }
    },
    components: {
        addStudent,examCopy,batchUpload,studentOrder,studentexamOrder
    }
}
</script>

<style scoped>
.mainBox{
    background:#fff;
    margin-bottom:15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:15px;
}
.mainBox >>> .el-button{
    background:#366EF4;
    border:solid 1px #366EF4;
    height:36px;
}
.mainBox >>> .el-select .el-input__inner, .mainBox >>> .el-input__inner{
	 width:150px; 
     margin-left:4px;
     border-radius: 10px;
     height:36px;
}
.mainBox >>> .el-input__icon{
    line-height:36px;
}
.mainBox >>> .distpicker-address-wrapper select{
    height:35px;
    line-height:35px;
    border-radius:10px;
    font-size:14px;
    color:#999;
    border:solid 1px #DCDFE6;
}
.mainBox ul{
    display: flex;
    align-items: center;
}
.mainBox ul li{
    font-size:14px;
    margin-right:15px;
    padding:0 10px;
    line-height:36px;
    cursor: pointer;
    border-bottom:solid 2px #fff;
}
.mainBox ul li:hover,.mainBox ul li.hover{
    color:#0052D9;
    border-bottom:solid 2px #0052D9;
}

    .scopednr b{
        display: inline-block;
        font-weight:normal;
        margin:0 8px;
        color:#165DFF;
        cursor: pointer;
    }
    .scopednr b:last-child{
        color:#D54941
    }
    
</style>